<template>
  <div class="order">
    <el-input
      placeholder="搜索编号"
      v-model="selects.selectId"
      clearable
      class="select"
    ></el-input>
    <el-input
      placeholder="搜索订单号"
      v-model="selects.selectNumber"
      clearable
      class="select"
    ></el-input>
    <el-button icon="el-icon-search" circle @click="select()"></el-button>
    <el-button icon="el-icon-refresh" circle @click="refresh()"></el-button>
    <el-table
      :data="tableData"
      style="width: 100%; text-align: center"
      height="650"
    >
      <el-table-column prop="id" label="编号" width="100"> </el-table-column>
      <el-table-column prop="number" label="订单号" width="180">
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <p :style="{ color: scope.row.status == 1 ? '#F56C6C' : '#409EFF' }">
            {{ scope.row.status == 1 ? "未完成" : "完成" }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="完成确认" width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==1" type="success" icon="el-icon-check" circle @click="finnishOrder(scope.row.number)"></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="userId" label="用户id" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" width="180">
      </el-table-column>
      <el-table-column prop="num" label="购买数量" width="180">
      </el-table-column>
      <el-table-column label="总计价格" width="180">
        <template slot-scope="scope">
          ￥{{ scope.row.amount.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="昵称" width="180"> </el-table-column>
      <el-table-column prop="remark" label="备注" width="180">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="180">
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center; margin-top: 20px"
      @current-change="handleCurrentChange"
      :current-page="pages.page"
      @size-change="sizeChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pages.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "CatcoffeeOrder",

  data() {
    return {
      selects: {
        selectId: "",
        selectNumber: "",
      },
      pages: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
    };
  },

  mounted() {
    this.select();
  },

  methods: {
    select() {
      let sel = {...this.selects};
      this.$axios({
        methods: "get",
        url: "/order/select",
        params: {
          pageSize: this.pages.pageSize,
          page: this.pages.page,
          ...sel,
        },
      }).then((res) => {
        this.tableData = res.data.data.records;
        this.pages.total = res.data.data.total;
      });
    },
    sizeChange(size){
      this.pages.pageSize = size;
      this.select();
    },
    handleCurrentChange(page) {
      this.pages.page = page;
      this.select();
      console.log(page);
    },
    refresh() {
      this.selects = {
        selectId: "",
        selectNumber: "",
      };
      this.select();
    },
    finnishOrder(id){
      this.$axios({
        method:'GET',
        url:"/order/finnishOrder",
        params:{
          number:id
        }
      }).then(res=>{
        console.log(res);
        this.select();
      })
    }
  },
};
</script>

<style scoped>
.order {
  padding: 20px;
}

.select {
  width: 200px;
  margin-right: 10px;
}
</style>